<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>slides-2</title>
    <style>
      * {
        margin: 0;
        padding: 0;
        box-sizing: border-box;
      }

      .window {
        width: 533px;
        height: 300px;
        margin: 20px auto;
        overflow: hidden;
      }
      .images {
        position: relative;
      }

      .images > img {
        width: 100%;
        transition: all 0.3s;
        position: absolute;
        top: 0;
      }
      .images > img.current {
        left: 0;
        transform: translateY(0);
        z-index: 1;
      }
      .images > img.leave {
        transform: translateX(-100%);
        z-index: 1;
      }

      .images > img.enter {
        transform: translateX(100%);
      }
    </style>
  </head>
  <body>
    <div class="window">
      <div class="images">
        <img src="./0.jpg" alt="图片" width="533" height="300" />
        <img src="./1.jpg" alt="图片" width="533" height="300" />
        <img src="./2.jpg" alt="图片" width="533" height="300" />
      </div>
    </div>

    <script src="https://cdn.bootcss.com/jquery/3.4.1/jquery.min.js"></script>
    <script>
      let n;
      init();
      setInterval(() => {
        makeLeave(getImage(n)).one("transitionend", e => {
          makeEnter($(e.currentTarget));
        });
        makeCurrent(getImage(n + 1));
        n += 1;
      }, 3000);












      function getImage(n) {
        return $(`.images > img:nth-child(${x(n)})`);
      }

      function x(n) {
        if (n > 3) {
          n = n % 3;
          if (n === 0) {
            n = 3;
          }
        }
        return n;
      }
      function makeCurrent($node) {
        return $node.removeClass("enter leave").addClass("current");
      }
      function makeLeave($node) {
        return $node.removeClass("enter current").addClass("leave");
      }
      function makeEnter($node) {
        return $node.removeClass("leave current").addClass("enter");
      }

      function init() {
        n = 1;
        $(`.images > img:nth-child(${n})`)
          .addClass("current")
          .siblings()
          .addClass("enter");
      }
    </script>
  </body>
</html>
